<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | My project</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">

    <!-- 关键: 让页面缩放自适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
      html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background: black;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #unity-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #unity-canvas {
        width: 100%;
        height: 100%;
        max-width: 1080px;
        max-height: 1920px;
        aspect-ratio: 1080 / 1920; /* 保持竖屏比例 */
        background: black;
      }
    </style>
  </head>
  <body>
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas" tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning"> </div>
      <div id="unity-footer">
        <div id="unity-webgl-logo"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">My project</div>
      </div>
    </div>
    <script>
      var canvas = document.querySelector("#unity-canvas");
      var loadingBar = document.querySelector("#unity-loading-bar");
      var progressBarFull = document.querySelector("#unity-progress-bar-full");
      var fullscreenButton = document.querySelector("#unity-fullscreen-button");
      var warningBanner = document.querySelector("#unity-warning");

      function unityShowBanner(msg, type) {
        var div = document.createElement('div');
        div.innerHTML = msg;
        warningBanner.appendChild(div);
        if (type == 'error') div.style = 'background: red; padding: 10px;';
        else if (type == 'warning') {
          div.style = 'background: yellow; padding: 10px;';
          setTimeout(() => warningBanner.removeChild(div), 5000);
        }
      }

      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/Z_Daolu_B.loader.js";
      var config = {
        dataUrl: buildUrl + "/Z_Daolu_B.data",
        frameworkUrl: buildUrl + "/Z_Daolu_B.framework.js",
        codeUrl: buildUrl + "/Z_Daolu_B.wasm",
        symbolsUrl: buildUrl + "/Z_Daolu_B.symbols.json",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "My project",
        productVersion: "0.1",
        showBanner: unityShowBanner,
      };

      loadingBar.style.display = "block";

      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
          loadingBar.style.display = "none";
          fullscreenButton.onclick = () => unityInstance.SetFullscreen(1);
        }).catch((message) => alert(message));
      };
      document.body.appendChild(script);
    </script>
  </body>
</html>
